<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">
    </div>
</body>
<!-- 引入依赖 引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type = "text/javascript"></script>
<script src = "../React-js/react-dom.development.js" type = "text/javascript"></script>
<script src="../React-js/babel.min.js" type="text/javascript"></script>


<script type="text/babel">
    //创建组件
    class Weather extends React.Component{
        constructor(props){
            super(props)
            this.state={isHot:false}
            //解决changeWeather1的this指向问题
            this.changeWeather2 = this.changeWeather1.bind(this)

        }
        render(){
            const {isHot} = this.state
            return <h1 onClick={this.changeWeather2}>今天天气很{isHot?'炎热':'凉爽'}</h1>
        }

        //自定义方法
        changeWeather1(){
            const isHot = this.state.isHot;
            //状态必须通过setState进行更新（不是全部替换），
            this.setState({isHot:!isHot});
        }
    }
    ReactDOM.render(<Weather/>,document.getElementById("test"))
    
</script>
</html>